<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas width="600px" height="500px" id="canvas"></canvas>

<script>
    const ctx = document.querySelector("#canvas").getContext("2d")

    const img = new Image()
    img.src = "./assets/imgs/1.jpg"

    img.onload = function () {
        console.log('加载完成')
        // 图片对象，左上角坐标,图片宽高
        ctx.drawImage(img, 0, 0, 350, 250)
    }


</script>
</body>
</html>